<template>
  <div id="echarts">
    <div class="mask">
      <div id="top_left"></div>
      <div id="top_right"></div>
      <div id="bottom_left"></div>
      <div id="bottom_right">
        <el-card class="box-card">
          <el-button
          v-for="(item, index) in btns"
          :key="index"
          class="btn"
          :style="item == 'echarts' ? 'display:none' : ''"
          @click="btn(item)"
          >{{ item }}</el-button
        >
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import * as echarts from "echarts";

export default {
  computed: {
    ...mapState({
      btns: (state) => state.vuex.btns,
    }),
  },
  mounted() {
    this.tl = echarts.init(document.getElementById("top_left"));
    this.tl.setOption(this.tlOption);

    this.tr = echarts.init(document.getElementById("top_right"));
    this.tr.setOption(this.trOption);

    this.bl = echarts.init(document.getElementById("bottom_left"));
    this.bl.setOption(this.blOption);

    window.addEventListener("resize", () => {
      this.tl.resize();
      this.tr.resize();
      this.bl.resize();
    });
  },
  data() {
    return {
      tl: null,
      tr: null,
      bl: null,

      tlOption: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLabel: {
            textStyle: {
              color: "#fff", //改变轴字体颜色
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true, //显示y轴
            lineStyle: {
              color: "#fff", //轴的颜色
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            symbol: "circle", //设置拐点
            itemStyle: {
              normal: {
                color: "#000", //改变折线拐点填充色
                borderColor: "#6cf", //改变折线拐点border颜色
                lineStyle: {
                  color: "rgba(102,204,255,0.6)", //改变折线颜色
                },
              },
            },
          },
        ],
      },
      trOption: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            itemStyle: {
              color: "rgba(102,204,255,0.6)", //改变柱状图颜色
            },
          },
        ],
      },
      blOption: {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
          textStyle: {
            color: "#6cf", //改变饼图标题颜色
          },
          subtextStyle: {
            color: "6cf", //改变饼图副标题颜色
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            color: "auto", //修改左上角字体颜色
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              {
                value: 100,
                name: "Search Engine",
                label: { color: "#6cf" }, //改变饼图旁文字颜色
              },
              { value: 200, name: "Direct", label: { color: "#fff" } },
              { value: 300, name: "Email", label: { color: "#000" } },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0,0,0,0.5)", //鼠标放到饼图上饼图的阴影颜色
              },
            },
            itemStyle: {
              color: (colors) => {
                let colorList = [
                  "rgba(102,204,255,0.6)",
                  "rgba(255,255,255,0.6)",
                  "rgba(0,0,0,0.6)",
                ];
                return colorList[colors.dataIndex];
              }, //改变饼图颜色
            },
          },
        ],
      },
    };
  },
  methods: {
    btn(val) {
      this.$router.push(`/${val}`)
    }
  }
};
</script>

<style lang="scss" scoped>
#echarts {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/vergil.png");
  background-size: cover;
  background-position: center;
  overflow-y: auto;

  .mask {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.4);

    > div {
      width: 50%;
      height: 50%;
      overflow: hidden;
    }

    #bottom_right {
      display: flex;
      justify-content: right;
      height: calc(50% - 20px);
      padding: 10px 0;
      .box-card {
        width: 140px;
        height: 100%;
        margin-right: 10px;
        background-color: transparent;
        :deep(.el-card__body) {
          text-align: center;
        }
        .btn {
          width: 100px;
          margin: 0 0 5px;
          background-color: transparent;
          color: #fff;
          &:hover {
            background-color: rgba($color: #000, $alpha: 0.6);
          }
        }
      }
    }
  }
}
</style>